<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>发票抬头</title>
</head>
<body>
	<div id="invoiceTitle">
		<div class="invoCon">
			<div class="inlist">
				<span class="listName">个人</span>
				<div class="invoClass">
					发票类型
					<span class="cate">增值税普通发票</span>
				</div>
			</div>
		</div>
		<div class="editCon">
			<a href="editInvoice.html" class="edit">编辑发票抬头</a>
			<span class="cancel">取消</span>
		</div>
	</div>
	<div class="mask"></div>
<script type="text/javascript">
	$('.invoCon .inlist').on('click',function(){
		$('.editCon').animate({
			height:"2.866rem",
		},200).show()
		$('.mask').animate({
			height:"100%",
		},100).show()
    	
		//点击遮罩层
		$('.mask , .cancel').on('click',function(){
			$('.editCon').animate({
				height:"0",
			},200).hide()
			$('.mask').animate({
				height:"0",
			},100).hide()
		})
	})
</script>
</body>
</html>
